<template>
	<!-- 商城 -->
	<view class="body">
		<view class="Top">
			<view>
				<text :class="mallChange==1 ?'Top_select':''" @click="MallChange(1)">健身周边</text>
				<text :class="mallChange==2 ?'Top_select':''" @click="MallChange(2)">商城</text>
			</view>
			<view @click="Search">
				<image src="~@/static/Mall/搜索.png" />
			</view>
			<input v-if="search==1" type="text" v-model="searchText" @input="SearchChange" />
		</view>
		<view class="Bottom" v-show="mallChange==1">
			<view v-for="(item,index) in showArr2" :key="index" @click="Goods(item)">
				<image :src="'/static/Mall/'+item.goodsImg" />
				<text>{{item.goodsName}}</text>
				<view>
					<text>￥{{item.goodsPrice[0]}}</text>
					<text class="iconfont .icon-gouwuche" @click.stop="Add(item)" />
				</view>
			</view>
		</view>
		<view class="Bottom" v-show="mallChange==2">
			<view v-for="(item,index) in showArr" :key="index" @click="Goods(item)">
				<image :src="'/static/Mall/'+item.goodsImg" />
				<text>{{item.goodsName}}</text>
				<view>
					<text>￥{{item.goodsPrice[0]}}</text>
					<text class="iconfont .icon-gouwuche" @click.stop="Add(item)" />
				</view>
			</view>
		</view>
		<view class="Fixed">
			<view @click="MyOrder"><text class="iconfont .icon-wode" /></view>
			<view @click="ShoppingCart"><text class="iconfont .icon-gouwuche" /></view>
		</view>
	</view>
	<!-- 模态框 -->
	<uni-popup ref="popup" safeArea backgroundColor="#fff" @change="change">
		<view class="myModel">
			<view>请选择规格：<text v-if="selectMoney!=''">￥{{selectMoney}}</text></view>
			<view>
				<view v-for="(item,index) in Label" :key="index" :class="selectLabel==item?'mySelect':''"
					@click="SelectLabel(item,index)">
					{{item}}
				</view>
			</view>
			<view>
				<view @click="AddOK">加入购物车</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		reactive
	} from 'vue';
	import store from '../../store/index.js';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import myRequest from '../../utils/myRequest.js';
	export default {
		setup() {
			let data = reactive({
				mallChange: 2,
				search: 0,
				searchText: "",
				goodsId: -1,
				Label: "",
				selectLabel: "",
				money: "",
				selectMoney: "",
				dataArr: [],
				showArr: [],
				dataArr2: [],
				showArr2: [],
				MallChange: function(i) {
					data.mallChange = i;
				},
				Search: function() {
					if (data.search == 1) {
						data.searchText = "";
						data.showArr = data.dataArr;
						data.showArr2 = data.dataArr2;
						return data.search = 0;
					}
					data.search = 1;
				},
				SearchChange: function() {
					if (data.searchText == "") {
						data.showArr = data.dataArr;
						data.showArr2 = data.dataArr2;
					} else {
						if (data.mallChange == 2) {
							data.showArr = [];
							data.dataArr.forEach((item) => {
								if (item.goodsIntro.includes(data.searchText) || item.goodsName
									.includes(
										data.searchText)) {
									data.showArr.push(item);
								}
							})
						} else if (data.mallChange == 1) {
							data.showArr2 = [];
							data.dataArr2.forEach((item) => {
								if (item.goodsIntro.includes(data.searchText) || item.goodsName
									.includes(
										data.searchText)) {
									data.showArr2.push(item);
								}
							})
						}
					}
				},
				Goods: function(item) {
					uni.navigateTo({
						url: 'Goods?id=' + item.goodsId
					});
				},
				Add: function(item) {
					data.goodsId = item.goodsId;
					data.Label = JSON.parse(item.goodsSpec);
					data.money = item.goodsPrice;
					this.$refs.popup.open('bottom');
				},
				SelectLabel: function(item, index) {
					data.selectLabel = item;
					data.selectMoney = data.money[index];
				},
				AddOK: function() {
					if (data.selectLabel == "") {
						uni.showToast({
							title: '请选择规格',
							icon: 'none',
							duration: 2000
						});
					} else {
						myRequest({
							url: "/sC_add",
							method: 'POST',
							data: {
								vipId: store.state.userdata[0].vipId,
								goodsId: data.goodsId,
								label: data.selectLabel,
								money: data.selectMoney
							},
						}).then((res) => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '添加成功',
									duration: 2000
								});
								data.selectLabel = "";
								this.$refs.popup.close();
							}
						})
					}
				},
				change(e) {
					if (e.show == false) {
						data.selectLabel = "";
						data.selectMoney = "";
					}
				},
				MyOrder: function() {
					// uni.navigateTo({
					// 	url: 'MyOrder'
					// });
					console.log("我的订单")
				},
				ShoppingCart: function() {
					uni.navigateTo({
						url: 'ShoppingCart'
					});
				}
			});
			onShow(function() {
				if (data.searchText == "") {
					myRequest({
						url: "/getgoods"
					}).then((res) => {
						if (res.data.code == 200) {
							let myarr = res.data.data;
							data.dataArr = [];
							data.dataArr2 = [];
							myarr.forEach((item) => {
								item.goodsPrice = JSON.parse(item.goodsPrice);
								if (item.goodsType == 2) {
									data.dataArr.push(item)
								} else if (item.goodsType == 1) {
									data.dataArr2.push(item)
								}
							})
							data.showArr = data.dataArr;
							data.showArr2 = data.dataArr2;
						}
					})
				}
			})
			return data;
		}
	}
</script>

<style>
	@import url('~@/static/Mall/iconfont.css');

	.body {
		padding: 0 30rpx;
		font-size: 30rpx;
	}

	.Top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 690rpx;
		padding: 0 30rpx;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #FFFFFF;
	}

	.Top>view:nth-of-type(1)>text {
		display: inline-block;
		height: 80rpx;
		margin: 0 15rpx;
		padding: 0 15rpx;
		line-height: 80rpx;
	}

	.Top>view:nth-of-type(1)>.Top_select {
		border-bottom: 4rpx solid #1ABC9C;
		box-sizing: border-box;
	}

	.Top>view:nth-of-type(2) {
		display: flex;
	}

	.Top>view:nth-of-type(2)>image {
		width: 40rpx;
		height: 40rpx;
	}

	.Top>input {
		position: absolute;
		left: 30rpx;
		bottom: 0;
		width: 600rpx;
		height: 70rpx;
		padding: 0 20rpx;
		border-radius: 16rpx;
		background-color: #F2F2F2;
	}

	.Bottom {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 100rpx;
	}

	.Bottom>view {
		width: 340rpx;
		margin-bottom: 10rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 4rpx 4rpx 12rpx #CDD0DC;
	}

	.Bottom>view>image {
		display: block;
		width: 340rpx;
		height: 300rpx;
	}

	.Bottom>view>text {
		display: inline-block;
		width: 320rpx;
		padding: 20rpx 20rpx 0 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.Bottom>view>view {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
	}

	.Bottom>view>view>text:nth-of-type(1) {
		font-weight: bold;
		color: #FF0000;
	}

	.Fixed {
		position: fixed;
		bottom: 80rpx;
		right: 40rpx;
	}

	.Fixed>view {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		background-color: #3478F7;
	}

	.Fixed>view:nth-of-type(2) {
		margin-top: 30rpx;
	}

	.Fixed>view>text {
		font-size: 50rpx;
	}

	.myModel>view:nth-of-type(1) {
		font-size: 32rpx;
		padding: 30rpx 10rpx 0 10rpx;
	}

	.myModel>view:nth-of-type(1)>text {
		font-weight: bold;
		color: #FF0000;
	}

	.myModel>view:nth-of-type(2) {
		display: flex;
		flex-wrap: wrap;
		margin: 10rpx 0 30rpx 0;
		padding: 30rpx 10rpx 0 10rpx;
		font-size: 28rpx;
	}

	.myModel>view:nth-of-type(2)>view {
		margin: 6rpx 12rpx;
		padding: 10rpx 30rpx;
		border: 2rpx solid #999999;
		border-radius: 10rpx;
	}

	.myModel>view:nth-of-type(2)>.mySelect {
		color: #FF9900;
		border: 2rpx solid #FF9900;
	}

	.myModel>view:nth-of-type(3) {
		display: flex;
		justify-content: flex-end;
	}

	.myModel>view:nth-of-type(3)>view:nth-of-type(1) {
		width: 375rpx;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		color: #FFFFFF;
		background-color: #FF9900;
	}
</style>
